<template>
<div>
  <div class="header">
    <div class="left">
      <span style="font-size: 20px">{{ name }}</span>
    </div>
   
  </div>

   <div class="but-close">

      <el-button type="primary" icon="el-icon-close" @click="close()" circle></el-button>
   
    </div>

  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const { ipcRenderer, remote } = window.require('electron');
export default {
  name: 'Header',
  setup() {
    const router = useRouter()
    const pathMap = {
      template: '模版管理',
      gentable: '表格管理',
      genCode: '开发语言',
      mapping: '数据代码映射',
      templateFile: '模版文件管理',
      Home: '基本设置',
      gendb: '数据库链接'
    }
    const state = reactive({
      name: '基本设置'
    })

    router.afterEach((to) => {
      console.log('to', to.name)
      const { id } = to.query
      state.name = pathMap[to.name]
    })

    function close(){
     
      ipcRenderer.send('win-close', '');
      }

    return {
      close,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
.but-close{
  position: absolute;
  top:5px;
  right:10px;
  -webkit-app-region: no-drag

}
  .header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    -webkit-app-region: drag;
  }
</style>